---
type: tutorial
title: Créez votre première page Astro
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Ajoutez de nouvelles pages à votre site avec des liens de navigation entre elles
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous savez que les fichiers `.astro` sont responsables des pages de votre site web, créons-en un !

<PreCheck>
  - Créez deux nouvelles pages sur votre site web : À propos et Blog
  - Ajoutez des liens de navigation vers vos pages
  - Déployez une version mise à jour de votre site sur le web
</PreCheck>

## Créez un nouveau fichier `.astro`

<Steps>
1. Dans le volet des fichiers de votre éditeur de code, accédez au dossier `src/pages/` où vous verrez le fichier existant `index.astro`.

2. Dans ce même dossier, créez un nouveau fichier nommé `about.astro`.

3. Copiez ou saisissez à nouveau le contenu de `index.astro` dans votre nouveau fichier `about.astro`.

    :::tip
    Votre éditeur peut afficher un cercle blanc plein sur l'étiquette de l'onglet de ce fichier. Cela signifie que le fichier n'est pas encore enregistré. Sous le menu Fichier de VS Code, activez "Enregistrement automatique" et vous n'aurez plus besoin d'enregistrer manuellement les fichiers.
    :::

4. Ajoutez `/about` à la fin de l'URL de prévisualisation de votre site dans la barre d'adresse et vérifiez que vous pouvez voir une page se charger à cet endroit (par exemple, `http://localhost:4321/about`).
</Steps>

À l'heure actuelle, votre page "À propos" devrait être exactement la même que la première page, mais nous allons changer cela !

## Modifiez votre page

Modifiez le contenu HTML pour faire de cette page une page vous concernant.

Pour modifier ou ajouter du contenu à votre page "À propos", ajoutez davantage de balises d'éléments HTML contenant du contenu. Vous pouvez copier et coller le code HTML ci-dessous entre les balises `<body></body>` existantes ou créer le vôtre.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>Mon site Astro</h1>
  <h1>À propos de moi</h1>
  <h2>... et de mon nouveau site Astro !</h2>

  <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

  <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
</body>
```

Maintenant, visitez à nouveau votre page `/about` dans l'onglet de votre navigateur, et vous devriez voir votre contenu mis à jour.

## Ajoutez des liens de navigation

Pour faciliter la prévisualisation de toutes vos pages, ajoutez des liens de navigation de page HTML avant votre `<h1>` en haut de vos deux pages (`index.astro` et `about.astro`) :

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Accueil</a>
<a href="/about/">À propos</a>

<h1>À propos de moi</h1>
<h2>... et de mon nouveau site Astro !</h2>
```

Vérifiez que vous pouvez cliquer sur ces liens pour passer d'une page à l'autre sur votre site.

:::note
Contrairement à de nombreux frameworks, Astro utilise des éléments HTML `<a>` standards pour naviguer entre les pages (également appelées _routes_), avec des rafraîchissements de page traditionnels.
:::

<Box icon="puzzle-piece">
## Essayez par vous-même - Ajoutez une page Blog

Ajoutez une troisième page `blog.astro` à votre site, en suivant les [mêmes étapes que ci-dessus](#créez-un-nouveau-fichier-astro).

(N'oubliez pas d'ajouter un troisième lien de navigation sur chaque page.)

<details>
<summary>Montrez-moi les étapes.</summary>
<Steps>
1. Créez un nouveau fichier à `src/pages/blog.astro`.
2. Copiez l'intégralité du contenu de `index.astro` et collez-le dans `blog.astro`.
3. [Ajoutez un troisième lien de navigation](#ajoutez-des-liens-de-navigation) en haut de chaque page :
</Steps>
  
```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>

  <h1>Mon site Astro</h1>
</body>
```
</details>
</Box>

Vous devriez maintenant avoir un site web avec trois pages qui se lient toutes les unes aux autres. Ajoutons du contenu à la page Blog.

Mettez à jour le contenu de la page `blog.astro` avec :

```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>

  <h1>Mon site Astro</h1>
  <h1>Mon blog d'apprentissage Astro</h1>
  <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
</body>
```

Prévisualisez l'ensemble de votre site en visitant les trois pages dans votre prévisualisation de navigateur et vérifiez que :
- Chaque page pointe correctement vers les trois pages
- Vos deux nouvelles pages ont chacune leur propre en-tête descriptif 
- Vos deux nouvelles pages ont chacune leur propre texte de paragraphe

## Publiez vos modifications sur le web
Si vous avez suivi notre configuration dans l'Unité 1, vous pouvez publier vos modifications sur votre site web en direct via Netlify.

Lorsque vous êtes satisfait de l'apparence de votre prévisualisation, **validez** vos modifications sur votre dépôt en ligne sur GitHub. 

<Steps>
1. Dans VS Code, prévisualisez les fichiers qui ont changé depuis votre dernier commit sur GitHub. 

    - Allez dans l'onglet **Contrôle de source** dans le menu de gauche. Il devrait afficher un petit "3".

    - Vous devriez voir `index.astro`, `about.astro`, et `blog.astro` listés comme des fichiers qui ont changé.


2. Entrez un message de commit (par exemple, "Ajout de deux nouvelles pages - à propos et blog") dans la zone de texte, puis appuyez sur <kbd>Ctrl + Entrée</kbd> (macOS : <kbd>Cmd ⌘ + Entrée</kbd>) pour valider la modification dans votre espace de travail actuel.

3. Cliquez sur le bouton <kbd>Synchroniser les modifications</kbd> vers GitHub.

4. Après avoir attendu quelques minutes, visitez votre URL Netlify pour vérifier que vos modifications sont publiées en direct.
</Steps>

:::tip[Validez et déployez régulièrement]
Suivez ces étapes à chaque fois que vous faites une pause dans votre travail ! Vos modifications seront mises à jour dans votre dépôt GitHub. Si vous avez déployé un site sur Netlify, il sera reconstruit et republié.
:::


<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux créer une nouvelle page pour mon site web et y ajouter un lien depuis une page existante.
- [ ] Je peux valider mes modifications sur GitHub et mettre à jour mon site en direct sur Netlify.
</Checklist>
</Box>

### Ressources

- [Routing basé sur les fichiers dans Astro](/fr/basics/astro-pages/#routage-basé-sur-les-fichiers)
- [Pages Astro en HTML](/fr/basics/astro-pages/#pages-astro)
